<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input~span {
				color: red;
			}

			p {
				/* border: 1px solid green; */
				width: 500px;

			}

			p label {
				display: inline-block;
				width: 160px;
				text-align: left;
				/* 	border: 1px solid red; */
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function() {
				$(":password[name=upass]").blur(function() {
					if ($(this).val().length < 8) {
						$(this).next().html("密码长度小于8").show();
					} else {
						$(this).next().hide();
					}
				});
					
				$(":submit").click(function(){
					//自定义默认的错误提示
					let email = $("input[name=email]")[0];
					console.log(email.validity.valueMissing+",?????");
					if (email.validity.valueMissing==true) {
						email.setCustomValidity("电子邮件不能为空");
					} else if (email.validity.typeMismatch==true) {
						email.setCustomValidity("必须按照电子右键的格式填写");
					} else {
						email.setCustomValidity("");
					}
					
				});
				$("#regForm").submit(function() {
					
					//
					let vpass = true;
					let vlike = true;
					//验证1：两次密码必须一致
					let p1 = $("input[name=upass]");
					if (p1.val().length < 8) {
						p1.next().html("密码长度小于8").show();
						vpass = false;
					} else {
						p1.next().hide();
					}
					let p2 = $("input[name=repass]");
					if (p1.val() != p2.val()) {
						p2.next().html("两次输入密码不一致").show();
						vpass = false;
					} else {
						p2.next().hide();
						vpass = true;
					}
					//爱好必选一个
					let s3 = $("[name=like]:checked").length;
					if (s3 < 1) {
						$("[name=like]").next("span").html("爱好必选一项").show();
						vlike = false;
					} else {
						$("[name=like]").next("span").hide();
						vlike = true;
					}
					return vlike && vpass;
				});
			});
		</script>
	</head>
	<body>
		<h2 style="text-align: center;">注册休闲网</h2>
		<form action="../jq/jq2.html" id="regForm">
			<p>
				<label>E-mail:</label>
				<input type="email" name="email" required />
			</p>
			<p>
				<label>亲输入密码:</label>
				<input type="password" name="upass" required /><span></span>
			</p>
			<p>
				<label>再次输入密码:</label>
				<input type="password" name="repass" required /><span></span>
			</p>
			<p>
				<label>姓名:</label>
				<input type="text" name="realname" required />
			</p>
			<p>
				<label>性别</label>
				<input type="radio" name="sex" value="Male" checked />男
				<input type="radio" name="sex" value="FeMale" />女

			</p>
			<p>
				<label>出生日期</label>
				<input type="date" name="birthday" />
			</p>
			<p>
				<label>爱好</label>
				<input type="checkbox" name="like" value="跳舞" />跳舞
				<input type="checkbox" name="like" value="唱歌" />唱歌
				<input type="checkbox" name="like" value="读书" />读书
				<input type="checkbox" name="like" value="运动" />运动
				<span></span>
			</p>
			<p>
				<label>头像</label>
				<input type="file" name="headpicture" />
			</p>
			<p>
				<input type="submit" value="注册" />
			</p>
		</form>
	</body>
</html>
